<template>
  <div class="raw-box">
    <div class="item" v-for="(rawItem, rawIndex) in infoData" :key="rawIndex">
      <div class="title">
        <div class="circular" :style="{backgroundColor: rawItem.color}"></div>
        <span class="text">
        {{rawItem.title}}
      </span>
      </div>
      <div class="content">
        <div class="content-item" v-for="(childItem, childIndex) in rawItem.children" :key="`${rawIndex}-${childIndex}`">
          <div class="img-box">
            <img :src="childItem.img">
          </div>
          <div class="info-box">
            <div class="text">
              <div>{{childItem.title}}</div>
              <div>{{childItem.num}}</div>
            </div>
            <div class="progress">
              <el-progress :percentage="childItem.percentage" :color="rawItem.color" :show-text="false"></el-progress>
            </div>
          </div>
        </div>
      </div>
    </div>



  </div>

</template>

<script>
    export default {
        name: "userRawData",
        data() {
            return {
                infoData: [
                    {
                        title: '上传原始数据',
                        color: '#64A15F',
                        children: [
                            {
                                title: '笔数',
                                num: '750,231',
                                img: require('@/static/images/上传原始数据-笔数@2x.png'),
                                percentage: 100
                            },
                            {
                                title: '金额',
                                num: '￥984,524',
                                img: require('@/static/images/上传原始数据-金额@2x.png'),
                                percentage: 100
                            },
                        ]
                    },
                    {
                        title: '有效数据',
                        color: '#89BE48',
                        children: [
                            {
                                title: '笔数',
                                num: '749,231',
                                img: require('@/static/images/有效数据-笔数@2x.png'),
                                percentage: 80
                            },
                            {
                                title: '金额',
                                num: '886,698',
                                img: require('@/static/images/有效数据-金额@2x.png'),
                                percentage: 80
                            },
                        ]
                    },
                    {
                        title: '挂起数据',
                        color: '#DE7C1E',
                        children: [
                            {
                                title: '笔数',
                                num: '21,231',
                                img: require('@/static/images/挂起数据-笔数@2x.png'),
                                percentage: 20
                            },
                            {
                                title: '金额',
                                num: '35,225',
                                img: require('@/static/images/挂起数据-金额@2x.png'),
                                percentage: 20
                            },
                        ]
                    }
                ]
            }
        },
        methods: {
            progressFormat() {
                return ''
            }
        }
    }
</script>

<style lang="scss" scoped>
  .raw-box {
    width: calc(100% - 32px);
    height: 300px;
    margin: 10px auto 20px auto;
    background-color: white;
    padding: 20px 16px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item {
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        .circular {
          width: 8px;
          height: 8px;
          background: #64A15F;
          border-radius: 50%;
        }
        .text {
          margin-left: 10px;
          font-size: 18px;
          font-weight: 400;
          color: #333333;
        }
      }
      .content {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;

        .content-item {
          width: 50%;
          display: flex;
          flex-direction: row;
          height: 42px;
          .img-box {
            width: 42px;
            height: 42px;
            img {
              width: 100%;
              height: 100%;
            }
          }

          .info-box {
            height: 42px;
            width: calc(100% - 92px);
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .text {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              div {
                &:first-child {
                  font-size: 16px;
                  font-weight: 400;
                  color: #666666;
                }
                &:last-child {
                  font-size: 18px;
                  font-weight: bold;
                  color: #333333;
                }
              }
            }

          }
        }
      }
    }
  }
</style>
